<template>
  <div id="app">
    <!-- 嵌套循环生成6个卡片 -->
    <el-row v-for="j in 2" :key="j">
      <el-col v-for="i in 3" :key="i" :span="8">
        <el-card :class="emotion[i * j]">
          <div slot="header" class="clearfix">
            <span class="mediaName">{{ Data[i * j].username }}</span>           
          </div>
          <div slot="header" class="clearfix">
            <span> ♥ </span>
            <span class="mediaName">{{ Data[i * j].likeCount }}</span>
            <i class="el-icon-chat-line-square"></i>
            <span class="mediaName">{{ Data[i * j].commentCount }}</span>
                      
            <i class="el-icon-share"></i>
            <span class="mediaName">{{ Data[i * j].shareCount }}</span>  
          </div>
          <span class="text">{{ Data[i * j].tweetText }}</span>
          <img
            v-if="Data[i * j].imageUrl != ''"
            :src="Data[i * j].imageUrl"
            class="image"
          />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      Data: [],
      emotion: [],
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      let mydata = this;
      mydata
        .$axios({
          method: "get",
          url: "http://116.62.228.138:10003/media/twitterEmotionGet12",
        })
        .then((res) => {
          mydata.Data = res.data.data;
          res.data.data.map((item) => {
            let positive = item.positive;
            let negative = item.negative;
            if (positive >= 4.57 && negative < 2.1)
              this.emotion.push("positive");
            else if (positive < 4.57 && negative >= 2.1)
              this.emotion.push("negative");
            else this.emotion.push("neutral");
          });
        });
    },
  },
};
</script>

<style lang="less">
#app {
  font-family: Arial, "Avenir", Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #353535;
  width: 100%;
  height: 100%;
  margin-top: 15px;
}

.el-row {
  margin-left: 20px;
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}

.text {
  font-size: 14px;
  text-align: justify;
}

.mediaName {
  font-size: 16px;
  color: #000;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.positive {
  width: 90%;
  height: 300px;
  background-color: #ffcc99;
}
.negative {
  width: 90%;
  height: 300px;
  background-color: rgb(150, 150, 150);
}
.neutral {
  width: 90%;
  height: 300px;
  background-color: #fff;
}

.image {
  width: 100%;
  height: 100%;
}
</style>
